<template>
	<view>	
		<!-- 店铺选择 -->
		<view style="position: relative;" id="mb">
			<u-tabs :list="tabs" lineWidth="20" lineHeight="4" lineColor="#ff983c"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" :current="tabCurr"
				@change="changeTab">
				<view slot="right" style="padding-left: 4px;" @tap="onShowClass">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
		
		</view>
		<!-- 店铺列表 -->
		<store-list class="content" :dataList="dataList"></store-list>
		<u-loadmore :status="loadStatus"></u-loadmore>
	</view>
</template>

<script>
import {apiGetStoreList} from '@/api/store.js'
import constant from '../../utils/constant'
	export default {
		data() {
			return {
				dataList:[],
				queryParams:{
					pageNum:1,
					pageSize:10,
					searchValue:'综合',
					longitude:'',
					latitude:'',
				},
				distance:300,
				tabCurr:0,
				loadStatus:'loadmore',
				navIdx: 0,
				res:'',
				clientHeight:0,
				navbarHeight:'',
				tabs:[
					{
						name:'综合',
					},
					{
						name:'加盟上新'
					},
					{
						name:'距离最近'
					},
					{
						name:'大众好评'
					}
				]
			}
		},
		// 滚动监听
		onPageScroll(e) {
		    this.handleScroll(e.scrollTop)
		},
		methods: {
			handleScroll(e){
				if(this.loadStatus !== 'nomore' && e >= (this.distance)){
					this.getStoreData()
				}
			},
			refreshQuery(){
				this.dataList = []
				this.distance = 300
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.queryParams.searchValue = '综合'
				
				let location = JSON.parse(uni.getStorageSync(constant.location))
				this.queryParams.longitude = location.longitude
				this.queryParams.latitude = location.latitude
			},
			loadMore(){
				
			},
			toStore(store){
				let store_id = store.id
				uni.navigateTo({
					url: '/pages/store/index'
				})
			},
			getStoreData(){
				this.loadStatus = 'loading'
				let params = JSON.parse(JSON.stringify(this.queryParams))
				apiGetStoreList(params).then(res=>{
					this.distance += 500
					this.pageNum += 1
					if(res.rows === null || this.queryParams.pageSize > res.rows.length){
						this.loadStatus = 'nomore'
					}else{
						this.loadStatus = 'loadmore'
					}
					
					if(this.dataList  === []){
						this.dataList = res.rows
					}else{
						this.dataList = [...this.dataList,...res.rows]
					}
					
				})
			},
			changeTab(e){
				this.refreshQuery()
				this.queryParams.searchValue = e.name
				this.getStoreData()
			},
			onShowClass(e){
				console.log(e)
			}
			
		},
		onLoad() {
			this.refreshQuery()
			this.getStoreData()
		}
	}
</script>

<style lang="scss" scoped>
.navbar{
	background-color: white;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.navbar-type{
		font-size: 30rpx;
		line-height: 50rpx;
		font-weight: 600;
		color: #6f6f6f;
	}
	.navbar-type-active{
		color: rgb(255, 212, 56);
		border-bottom: 2px solid rgb(255, 212, 56);
	}
}
.content{
	
}
</style>
